@charset "utf-8";
@import 'common/JHslide';
$color_blue: #00c1de;
.kv_wrap {
    height: 560px;
    position: relative;
    z-index: 1;
    background-color: rgb(36, 40, 44);
    .kv_content {
        height: 560px;
        z-index: 10;
        cursor: pointer;
    }
    li {
        position: relative;
        &.foc {
            .kv_title {
                opacity: 1;
                transform: translateY(0);
            }
            .kv_img {
                img:first-of-type {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
    }
    .kv_title {
        position: absolute;
        z-index: 2;
        top: 200px;
        left: 0;
        opacity: 0;
        transform: translateY(20px);
        transition: all .8s cubic-bezier(.4, 0, .2, 1);
        h1,
        h2 {
            line-height: 50px;
            font-weight: 400;
        }
        h1 {
            font-size: 44px;
        }
        h2 {
            font-size: 20px;
        }
        .kv_link {
            border: 1px solid #fff;
            background: transparent;
            outline: none;
            margin-top: 30px;
            font-size: 16px;
            line-height: 24px;
            text-align: center;
            width: 120px;
            height: 36px;
            transition: color .3s ease-in-out, background .3s ease-in-out;
            &:hover {
                color: #000;
                background: #fff;
            }
        }
    }
    .kv_img {
        pointer-events: none;
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: all .15s ease-out;
        >div {
            position: absolute;
            right: -60px;
            width: 800px;
            img {
                width: 100%;
                opacity: 0;
                transform: translateY(40px);
                transition: all .8s cubic-bezier(.4, 0, .2, 1) .1s;
            }
            &:first-of-type {
                img {
                    transform: translateY(25px);
                }
            }
        }
    }
}

.linkOne {
    background-color: #2d3035;
    ul {
        li {
            width: 20%;
            float: left;
            a {
                position: relative;
                border-left: 1px solid #373d41;
                display: block;
                height: 130px;
                background-color: #2d3035;
                padding: 42px 0 42px 68px;
                transition: all .3s;
                &:hover {
                    background: $color_blue;
                    border-left: 1px solid $color_blue;
                    img {
                        filter: grayscale(0);
                    }
                    p {
                        color: white;
                    }
                }
                img {
                    position: absolute;
                    width: 32px;
                    top: 42px;
                    left: 20px;
                    filter: grayscale(100%);
                }
                h1 {
                    height: 28px;
                    font-size: 16px;
                    font-weight: bolder;
                    line-height: 24px;
                }
                p {
                    line-height: 21px;
                    color: #9b9ea0;
                    font-size: 14px;
                    transition: all .3s;
                }
            }
            &:last-of-type {
                a {
                    border-right: 1px solid #373d41;
                    &:hover {
                        border-left: 1px solid $color_blue;
                    }
                }
            }
        }
    }
}

.product {
    >img {
        display: block;
        width: 90px;
        margin: 32px auto 24px;
    }
    >h1 {
        text-align: center;
        font-size: 24px;
        color: #373d41;
        line-height: 36px;
        font-weight: 500;
    }
    >a {
        text-align: center;
        font-size: 16px;
        margin: 8px 0 42px;
        display: block;
        color: #373d41;
        transition: color .2s ease;
        &:hover {
            color: $color_blue;
        }
    }
}

.product_warp {
    .layers {
        ul {
            position: relative;
            text-align: center;
            overflow: hidden;
            width: 100%;
            li {
                float: left;
                padding: 15px 39px;
                width: 156px;
                box-sizing: content-box;
                .pro_list_con {
                    cursor: pointer;
                    &.active,
                    &:hover {
                        .pro_title {
                            color: $color_blue;
                        }
                    }
                }
                .pro_icon {
                    width: 80px;
                    height: 80px;
                    margin: auto;
                    background-repeat: no-repeat;
                    background-size: contain;
                }
                .pro_title {
                    color: rgb(55, 61, 65);
                    font-size: 14px;
                    line-height: 21px;
                    transition: color .2s ease;
                }
            }
            .focus {
                position: absolute;
                display: block;
                bottom: 0;
                width: 0;
                height: 0;
                border-right: 10px solid transparent;
                border-left: 10px solid transparent;
                border-bottom: 8px solid #f5f5f6;
                transition: left .3s linear;
            }
        }
        .pro_page {
            background-color: #f5f5f6;
            overflow: hidden;
            .pro_page_con {
                height: 300px;
            }
        }
    }
}